/* refer to :https://www.allacronyms.com/list/abbreviated*/
.rsm-lst-wrp {
    .bnr-card {
        margin-left: 0;
        margin-right: 0;
    }
}

.rsm-lst {
    // refer to: https://zhuanlan.zhihu.com/p/256353171
    display: grid;
    grid-template-columns: repeat(5, minmax(0px, 1fr));
    column-gap: 16px;

    .rsm-wrp {
        position: relative;
        box-sizing: border-box;
        border-radius: 8px;
        margin-bottom: 16px;
        overflow: hidden;

        > * {
            margin: 0;
        }

        .rsm {
            width: 100%;
            height: 100%;
            background-color: #f7f7f7;
            border: 1px solid #f7f7f7;

            .top-action {
                z-index: 1;
                position: absolute;
                // refer to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
                transition: all 0.2s;
                opacity: 0;
                top: 8px;
                right: 8px;

                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);

                &:hover svg {
                    cursor: pointer;
                    fill: var(--color-link-secondary);
                    // border-color: var(--color-link-secondary); //#05f;
                    // box-shadow: 0 0 10px rgb(0 0 0 / 50%);
                }
            }

            .center-action {
                opacity: 0;
                z-index: 1;
                position: absolute;
                ////https://blog.csdn.net/qq_46469137/article/details/105921737,https://www.cnblogs.com/knuzy/p/9993181.html
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                transition: all 0.2s;

                &:hover {
                    opacity: 1;
                }
            }

            &:hover {
                border-color: rgba(43, 59, 74, 0.3);

                & .top-action {
                    // refer to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
                    opacity: 1;
                    transform: translateY(0);
                    -webkit-transform: translateY(0);
                }

                & .center-action {
                    opacity: 1;
                }
            }

            .content {
                position: relative;
                margin: 0;
                width: 100%;
                height: 100%;

                justify-content: center;
                align-items: center;
                color: #000;

                &.is-empty {
                    display: flex;
                    text-align: center;
                    justify-content: center;
                    align-items: center;

                    .tips {
                        &::before {
                            content: '+';
                            display: block;
                            font-weight: 200;
                            font-size: 1.8em;
                            line-height: 1.8rem;
                            margin: 16px 0;
                        }
                    }
                }

                .rsm-img img {
                    width: 100%;
                    max-width: 100%;
                    vertical-align: middle;
                }

                .rsm-title {
                    margin: 12px;

                    &:hover {
                        color: var(--color-link-secondary);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1199px) {
    .rsm-lst {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
    }
}

@media screen and (max-width: 899px) {
    .rsm-lst {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
    }
}
